@layout("/common/_container.html",{css:["/assets/modular/frame/user_info.css"],js:["/assets/basic/basicDriver/basicDriver_add.js"]}){
<style>
	.user-info-head {
	    width: 200px;
	    height: 180px;
	}
	
	.user-info-head img {
	    width: 200px;
	    height: 180px;
    	border-radius: 5%;
	}
	
	.user-info-head:hover:after {
	    border-radius: 5%;
    	line-height: 180px;
	}
	
	#container {
		width:1200px;
		height: 280px;
		position: relative;
	}
	.text-center{
		position: absolute;
	}
	.imgdiv-1{
		margin-left: 0px;
	}
	.imgdiv-2{
		margin-left: 220px;
	}
	.imgdiv-3{
		margin-left: 440px;
	}
	.imgdiv-4{
		margin-left: 660px;
	}
	.imgdiv-5{
		margin-left: 880px;
	}
	.layui-form-item {
    	margin-bottom: 2px;
	}
	.layui-badge-rim, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
    	border-color: #89d19d;
    }
    .layui-form-pane .layui-form-label {
   	 	background-color: #e6e6e6;
	}
</style>
<div class="layui-body-header">
    <span class="layui-body-header-title">Add Driver Information</span>
</div>

<div class="layui-fluid " style="">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="basicDriverForm" lay-filter="basicDriverForm" class="layui-form layui-form-pane" style="max-width: 1350px;margin: 10px auto;">
                <input name="id" type="hidden"/>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 1px;">
	<legend>Driver Information</legend>
  </fieldset>
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label" style="font-weight: 600;">Project<span style="color: red;">*</span></label>
				      <div class="layui-input-inline" style="width: 180px;">
	                        <select id="driverOperateId" name="driverOperateId" lay-verify="required" required>
	                            @for(item in basicOperatelist!){
	                            <option value="${item.id}">${item.operateName}</option>
	                            @}
	                        </select>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label" style="font-weight: 600;">Account<span style="color: red;">*</span></label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="driverNumber" name="driverNumber" placeholder="Please enter account, default password 111111" type="text" class="layui-input" lay-verify="required" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label" style="font-weight: 600;">Name<span style="color: red;">*</span></label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="driverName" name="driverName" placeholder="Please enter name" type="text" class="layui-input" lay-verify="required" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Gender</label>
				      <div class="layui-input-inline" style="width: 180px;">
	                        <select id="six" name="six" lay-verify="" required>
	                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
	                        </select>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label" style="font-weight: 600;">Phone<span style="color: red;">*</span></label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="tel" name="tel" placeholder="Please enter phone number" type="text" class="layui-input" lay-verify="required" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Driver Type</label>
				      <div class="layui-input-inline" style="width: 180px;">
	                        <select id="sijileibie" name="sijileibie" lay-verify="" required>
	                            <option value="External">External</option>
	                        </select>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">ID Card No.</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="idcard" name="idcard" placeholder="Please enter ID card number" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Age</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="age" name="age" placeholder="Please enter age" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Driving Category</label>
				      <div class="layui-input-inline" style="width: 180px;">
	                        <select id="drivetype" name="drivetype" class="layui-input" lay-verify="" required>
	                            <option value="Main Driver">Main Driver</option>
                            <option value="Co-driver">Co-driver</option>
	                        </select>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Emergency Contact</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="urgentpeople" name="urgentpeople" placeholder="Please enter emergency contact" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Emergency Contact Phone</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="urgentpeopletel" name="urgentpeopletel" placeholder="Please enter emergency contact phone" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">City</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="suozaichengshi" name="suozaichengshi" placeholder="Please enter city" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Address</label>
				      <div class="layui-input-inline" style="width: 480px;">
                        	<input id="xiangxidizhi" name="xiangxidizhi" placeholder="Please enter detailed address" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Driver's License No.</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="drivenumber" name="drivenumber" placeholder="Please enter driver's license number" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">License Type</label>
				      <div class="layui-input-inline" style="width: 180px;">
	                        <select id="zhunjiachexing" name="zhunjiachexing" class="layui-input" lay-verify="" required>
	                            <option value="A1">A1</option>
	                            <option value="A2">A2</option>
	                            <option value="A3">A3</option>
	                            <option value="B1">B1</option>
	                            <option value="B2">B2</option>
	                            <option value="C1">C1</option>
	                        </select>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Issue Date</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="jiashizhengfazhengriqi" name="jiashizhengfazhengriqi" placeholder="Please enter issue date" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Annual Inspection Date</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="jiashizhengnianshenriqi" name="jiashizhengnianshenriqi" placeholder="Please enter annual inspection date" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Demerit Points</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="jiashizhengfenshu" name="jiashizhengfenshu" placeholder="Please enter current points" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Start Date</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="jiashizhengqishiriqi" name="jiashizhengqishiriqi" placeholder="Please enter start date" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Expiry Date</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="jiashizhengjiezhiriqi" name="jiashizhengjiezhiriqi" placeholder="Please enter expiry date" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Issuing Authority</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="jiashizhengfazhengjiguan" name="jiashizhengfazhengjiguan" placeholder="Please enter issuing authority" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Professional License No.</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="practitionersnumber" name="practitionersnumber" placeholder="Please enter professional license number" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Issue Date</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="congyezhengfazhengriqi" name="congyezhengfazhengriqi" placeholder="Please enter issue date" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Start Date</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="congyezhengqishiriqi" name="congyezhengqishiriqi" placeholder="Please enter start date" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">End Date</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="congyezhengzhongzhiriqi" name="congyezhengzhongzhiriqi" placeholder="Please enter end date" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Issuing Authority</label>
				      <div class="layui-input-inline" style="width: 180px;">
                        	<input id="fazhengjiguan" name="fazhengjiguan" placeholder="Please enter issuing authority" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Remarks</label>
				      <div class="layui-input-inline" style="width: 480px;">
                        	<input id="notes" name="notes" placeholder="Please enter remarks" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
	<legend>Settlement Information</legend>
  </fieldset>
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Payee</label>
				      <div class="layui-input-inline" style="width: 180px;">
                            <input id="payee" name="payee" placeholder="Please enter payee" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Bank</label>
				      <div class="layui-input-inline" style="width: 180px;">
                            <input id="bank" name="bank" placeholder="Please enter bank" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Bank Location</label>
				      <div class="layui-input-inline" style="width: 180px;">
                            <input id="bankAddress" name="bankAddress" placeholder="Please enter bank location" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Account No.</label>
				      <div class="layui-input-inline" style="width: 180px;">
                            <input id="bankAccount" name="bankAccount" placeholder="Please enter account number" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				    </div>
				  </div>
				  
                  <div class="layui-form-item">
				    <div class="layui-inline">
                            <label class="layui-form-label">Bank Code</label>
				      <div class="layui-input-inline" style="width: 180px;">
                            <input id="bankNo" name="bankNo" placeholder="Please enter bank code" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Settlement Cycle</label>
				      <div class="layui-input-inline" style="width: 180px;">
	                        <select id="cycle" name="cycle" lay-filter="cycle" lay-verify="" required>
	                            <option value=""></option>
	                            <option value="Monthly">Monthly</option>
                            <option value="Receipt Settlement">Receipt Settlement</option>
	                        </select>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Tax Rate</label>
				      <div class="layui-input-inline" style="width: 180px;">
                            <input id="taxRate" name="taxRate" placeholder="Please enter tax rate" type="text" class="layui-input" lay-verify="" required/>
				      </div>
				      <div class="layui-form-mid">    </div>
                            <label class="layui-form-label">Fuel Card</label>
				      <div class="layui-input-inline" style="width: 180px;">
                            <select id="oilCardNumber" name="oilCardNumber" lay-filter="oilCardNumber" lay-verify="" required>
	                            <option value=""></option>
                                @for(item in basicOilCardlist!){
                                <option value="${item.cardNumber}">${item.cardName}, ${item.cardNumber}</option>
                                @}
                            </select>
				      </div>
				    </div>
				  </div>
				  
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
	<legend>Attachment Information</legend>
  </fieldset>
			  	<div id="container">
                    <div class="text-center layui-text imgdiv-1">
                        <div class="user-info-head" id="imgHead">
                            <img id="avatarPreview" src="https://z3.ax1x.com/2021/08/03/ficppn.png"/>
                        </div>
                        <h3 style="padding-top: 20px;">Driver Photo</h3>
                        <input id="sijiphotofileid" name="sijiphotofileid" type="hidden"/>
                    </div>
                    <div class="text-center layui-text imgdiv-2">
                        <div class="user-info-head" id="imgHead2">
                            <img id="avatarPreview2" src="https://z3.ax1x.com/2021/08/03/ficppn.png"/>
                        </div>
                        <h3 style="padding-top: 20px;">ID Card Front<span style="color: red;">*</span></h3>
                        <input id="idcarpohtofileid" name="idcarpohtofileid" type="hidden"/>
                    </div>
                    <div class="text-center layui-text imgdiv-5">
                        <div class="user-info-head" id="imgHead5">
                            <img id="avatarPreview5" src="https://z3.ax1x.com/2021/08/03/ficppn.png"/>
                        </div>
                        <h3 style="padding-top: 20px;">ID Card Back</h3>
                        <input id="mail" name="mail" type="hidden"/>
                    </div>
                    <div class="text-center layui-text imgdiv-3">
                        <div class="user-info-head" id="imgHead3">
                            <img id="avatarPreview3" src="https://z3.ax1x.com/2021/08/03/ficppn.png"/>
                        </div>
                        <h3 style="padding-top: 20px;">Driver's License<span style="color: red;">*</span></h3>
                        <input id="jiashizhengphotofileid" name="jiashizhengphotofileid" type="hidden"/>
                    </div>
                    <div class="text-center layui-text imgdiv-4">
                        <div class="user-info-head" id="imgHead4">
                            <img id="avatarPreview4" src="https://z3.ax1x.com/2021/08/03/ficppn.png"/>
                        </div>
                        <h3 style="padding-top: 20px;">Professional License</h3>
                        <input id="congyezhengphotofileid" name="congyezhengphotofileid" type="hidden"/>
                    </div>
			  	</div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;Submit&emsp;</button>
                        <button class="layui-btn layui-btn-primary" type="button" id="backupPage">&emsp;Back&emsp;</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@}